<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/item/scss/shop.css" />
		<link rel="stylesheet" type="text/css" href="/static/item/scss/main.css"/>
		<link rel="stylesheet" href="/static/item/scss/header.css" />
		<link rel="stylesheet" type="text/css" href="/static/item/bootstrap/css/bootstrap.css"/>
		<style>
			body, html {
				background:0 none;
			}
		</style>
	</head>
	<body>
		<div id="max">
		<header style="height: auto;background:0 none">
			<div th:include="top"></div>
		</header>
	</div>
	<div class="Shop" style="width: 100%">
		<div class="box">
			<div class="box-one ">
				<div class="boxx">

					<div class="imgbox">
						<div class="probox">
							<img class="img1" alt="" th:src="${item.skuInfo.skuDefaultImg}" >
							<div class="hoverbox"></div>
						</div>
						<div class="showbox">
							<img class="img1" alt="" th:src="${item.skuInfo.skuDefaultImg}">
						</div>
					</div>

					<div class="box-lh">

						<div class="box-lh-one">
							<ul>
								<li th:each="skuImage:${item.skuImages}">
								 		<img th:src="${skuImage.imgUrl}" th:if="${!#strings.isEmpty(skuImage.imgUrl)}"/>
								</li>
							</ul>
						</div>
						<div id="left">
							< </div>
								<div id="right">
									>
								</div>

						</div>

						<div class="boxx-one">
							<ul>
								<li>
									 
								</li>
								<li>

								</li>
							</ul>
						</div>

					</div>
					<div class="box-two">
						<div class="box-name" th:text="${item.skuInfo.skuTitle}">
							华为 HUAWEI Mate 10 6GB+128GB 亮黑色 移动联通电信4G手机 双卡双待
						</div>
						<div class="box-hide" th:text="${item.skuInfo.skuSubtitle}"></div>
						<div class="box-yuyue">
							<div class="yuyue-one">
								 热卖促销中
							</div>
							<div class="yuyue-two">
								<ul>
									<li>
										 
									</li>
									<li>
		 
									</li>
								</ul>
							</div>
						</div>
						<div class="box-summary clear">
							<ul>
								<li>惊喜价</li>
								<li>
									<span>￥</span>
									<span th:text="${#numbers.formatDecimal(item.skuInfo.price,1,2)}">4499.00</span>
								</li>
								<li style="color: red;" th:if="${item.seckillSku != null}">
								     <span th:if="${#dates.createNow().getTime() < item.seckillSku.startTime}">
                                           商品将于[[${#dates.format(new java.util.Date(item.seckillSku.startTime),"yyyy-MM-dd HH:mm:ss")}]]进行秒杀
									 </span>
                                     <span th:if="${#dates.createNow().getTime() >= item.seckillSku.startTime && #dates.createNow().getTime() <= item.seckillSku.endTime}">
										秒杀价：￥[[${#numbers.formatDecimal(item.seckillSku.seckillPrice,1,2)}]]
									 </span>
								</li>
								<li>
									<a href="">
										 
									</a>
								</li>
							</ul>
						</div>
						<div class="box-wrap clear">
						</div>

						<div class="box-stock">
							<ul class="box-ul">
								<li>库存:</li>
								<li class="box-stock-li">
									<div class="box-stock-one">
									</div>
 

								</li>
								<li>
									<span th:text="${item.hasStock?'有货':'无货'}"></span>
								</li>
 
							</ul>
						</div>

						<div class="box-attr-3">
						<br/>
							<div class="box-attr-2 clear"  th:each="saleAttr:${item.saleAttrs}">
								<dl>
									<dt>选择[[${saleAttr.attrName}]]</dt>
									<dd th:each="val:${saleAttr.attrSkuIds}">
										<a href="javascript:void(0);"
										   th:attr="skus=${val.skuIds},
										   class=${#lists.contains(#strings.listSplit(val.skuIds,','), item.skuInfo.skuId.toString())?'sku_attr_value checked':'sku_attr_value'}">
											 [[${val.attrValue}]]
										</a>
									</dd>
								</dl>
							</div>
							<br/>
						</div>

						<div class="box-btns clear">
							<div class="box-btns-one">
									<input type="text" name="num" id="num"  value="1"/>
									<input type="hidden" name="skuId" id="skuId"  th:value="${item.skuInfo.skuId}" />
								   <input type="hidden" name="promotionSessionId" id="promotionSessionId"  th:value="${item.seckillSku.promotionSessionId}" />
								    <input type="hidden" name="randomCode" id="randomCode"  th:value="${item.seckillSku.randomCode}" />

									<div class="box-btns-one1">

										<div>
											<button type="button" id="jia">
												+
											</button>
										</div>
										<div>
											<button type="button" id="jian">
												-
											</button>
										</div>

									</div>
							</div>
							<div id="cartBtn"  style="cursor:pointer;"  canClick="1"  onclick="addToCart(this)" class="box-btns-two"
							 th:if="${item.seckillSku == null || #dates.createNow().getTime() < item.seckillSku.startTime || #dates.createNow().getTime() > item.seckillSku.endTime}">
								放入购物车
							</div>

							<div id="seckill"  style="cursor:pointer;"  canClick="1"  onclick="seckillSku(this)" class="box-btns-two"
							th:if="${item.seckillSku != null && #dates.createNow().getTime() >= item.seckillSku.startTime && #dates.createNow().getTime() <= item.seckillSku.endTime}">
								立即秒杀
							</div>
						</div>

						 
					</div>

				</div>
			</div>
			 

			<div class="ShopXiangqing" style="width: 100%">
				<div class="allLeft">
					<!--火热预约-->
					<div class="huoreyuyue">
						<h3>火热预约</h3>
					</div>
					<div class="dangeshopxingqing">
						<ul class="shopdange">
							<li>
								<a href="##"><img src="/static/item/img/5a0afeddNb34732af.jpg" /></a>
								<p>
									<a href="##">OPPO R11s Plus 双卡双待全面屏拍照手机香槟色 全网通(6G RAM+64G ROM)标配</a>
								</p>
								<p><strong class="J-p-20015341974">￥3699.00</strong></p>
							</li>
							<li>
								<a href="##"><img src="/static/item/img/5a12873eN41754123.jpg" /></a>
								<p>
									<a target="_blank" title="詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版（新品预约）" href="/item.html.bak/item.jd.com/20348283521.html">詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版（新品预约）</a>
								</p>
								<p><strong class="J-p-20348283521">￥13999.00</strong></p>
							</li>
							<li>
								<a href="##"><img src="/static/item/img/59ec0131Nf239df75.jpg" /></a>
								<p>
									<a target="_blank" title="斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60" href="/item.html.bak/item.jd.com/16683419775.html">斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60</a>
								</p>
								<p><strong class="J-p-16683419775">￥1599.00</strong></p>
							</li>
							<li>
								<a href="##"><img src="/static/item/img/59015444N27317512.jpg" /></a>
								<p>
									<a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金" href="/item.html.bak/item.jd.com/12187770381.html">斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
								</p>
								<p><strong class="J-p-12187770381">￥2599.00</strong></p>
							</li>
						</ul>
					</div>
					<!--看了又看-->
					<div class="huoreyuyue">
						<h3>看了又看</h3>
					</div>
					<div class="dangeshopxingqing">
						<ul class="shopdange">
							<li>
								<a href="##"><img src="/static/item/img/59e55e01N369f98f2.jpg" /></a>
								<p>
									<a target="_blank" title="华为（HUAWEI） 华为 Mate10 4G手机  双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)" href="/item.html.bak/item.jd.com/17931625443.html">华为（HUAWEI） 华为 Mate10 4G手机 双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)</a>
									<p><strong class="J-p-17931625443">￥4766.00</strong></p>
							</li>
							<li>
								<a href="##"><img src="/static/item/img/584fcc3eNdb0ab94c.jpg" /></a>
								<p>
									<a target="_blank" title="华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待" href="/item.html.bak/item.jd.com/3749093.html">华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待</a>
								</p>
								<p><strong class="J-p-3749093">￥4899.00</strong></p>
							</li>
							<li>
								<!--shopjieshao-->
								<a href="##"><img src="/static/item/img/59eb0df9Nd66d7585.jpg" /></a>
								<p>
									<a target="_blank" title="华为（HUAWEI） 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版" href="/item.html.bak/item.jd.com/12306211773.html">华为（HUAWEI） 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版</a>
								</p>
								<p><strong class="J-p-12306211773">￥4088.00</strong></p>
							</li>
							<li>
								<a href="##"><img src="/static/item/img/5a002ba3N126c2f73.jpg" /></a>
								<p>
									<a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金" href="/item.html.bak/item.jd.com/12187770381.html">斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
								</p>
								<p><strong class="J-p-12187770381">￥2599.00</strong></p>
							</li>
						</ul>
						<img src="/static/item/img/5a084a1aNa1aa0a71.jpg" />
					</div>
				</div>
				<!--商品介绍-->
				<div class="allquanbushop">
					<ul class="shopjieshao" >
						<li class="jieshoa" style="background: #e4393c;" >
							<a href="##" style="color: white;">商品介绍</a>
						</li>
						<li class="baozhuang">
							<a href="##">规格与包装</a>
						</li>
						<li class="baozhang">
							<a href="##">售后保障</a>
						</li>
						<li class="pingjia">
							<a href="##">商品评价(4万+)</a>
						</li>
					</ul>
 
					<ul class="shopjieshaos posi"  style="display: none;">
						<li class="jieshoa" style="background: #e4393c;">
							<a href="#li1" style="color: white;">商品介绍</a>
						</li>
						<li class="baozhuang">
							<a href="#li2">规格与包装</a>
						</li>
						<li class="baozhang">
							<a href="#li3">售后保障</a>
						</li>
						<li class="pingjia">
							<a href="#li4">商品评价(4万+)</a>
						</li>
					</ul>

					<!--商品详情-->
					<div class="huawei">
						<ul class="xuanxiangka">
							<li class="jieshoa actives" id="li1">
								<div class="shanpinsssss">
									<label th:each="dec:${#strings.listSplit(item.decript,',')}">
										<img class="xiaoguo" th:src="${dec}" />
									</label>
								</div>
							</li>
							<li class="baozhuang actives" id="li2">
								<div class="guiGebox">
									<div class="guiGe" th:each="ga : ${item.groupAttrVos}">
										<h3 th:text="${ga.attrGroupName}">主体</h3>
										<dl th:each="attr : ${ga.attrs}">
											<dt th:text="${attr.attrName}">品牌</dt>
											<dd th:text="${attr.attrValue}">华为(HUAWEI)</dd>
										</dl>
									</div>
									<div class="package-list">
										<h3>包装清单</h3>
										<p>手机（含内置电池） X 1、5A大电流华为SuperCharge充电器X 1、5A USB数据线 X 1、半入耳式线控耳机 X 1、快速指南X 1、三包凭证 X 1、取卡针 X 1、保护壳 X 1</p>
									</div>
								</div>
							</li>
							<!--包装-->
							<li class="baozhang actives" id="li3">
								<div class="oBox">
									<div class="shuoHou">
										<div class="baoZhang">
											<h2>售后保障</h2>
										</div>
									</div>
									<!--厂家服务-->
									<div class="lianBao">

									</div>
								</div>
							</li>
									<!--评价-->
							<li class="PINgjia actives" id="li4">
								暂无评论！！
							</li>
					</ul>
			</div>
		</div>
	</div>
</div>



		<div class="Fixedbian">
			<ul>
				<li class="li1"><a class="aaa" href="##">顶部</a></li>
			</ul>
		</div>
		<div class="gouwuchexiaguo">
			<img src="/static/item/img/44.png" />
			<span>购物车还没有商品，赶紧选购吧！</span>
		</div>
	</body>

	<script src="/static/item/js/jquery1.9.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/item/js/js.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
        function addToCart(obj){
            var canClick = $(obj).attr("canClick");
			$(obj).attr("canClick","0");
            if(canClick=='0'){
                return ;
            }
            var skuId = $("#skuId").val();
            var num = $("#num").val();
            location.href="http://cart.cloudmall.com/addToCart?skuId="+skuId+"&num="+num;
			$(obj).attr("canClick","1");
        }
		function seckillSku(obj){
			var canClick = $(obj).attr("canClick");
			$(obj).attr("canClick","0");
			if(canClick=='0'){
				return ;
			}
			var num = $("#num").val();
			var killId = $("#promotionSessionId").val()+"_"+$("#skuId").val();
			var randomCode = $("#randomCode").val();
			location.href="http://seckill.cloudmall.com/kill?killId="+killId+"&num="+num+"&key="+randomCode;
			$(obj).attr("canClick","1");
		}

        function switchSkuId(){
        	return false;
		}

		$(function() {
            $("a[class='sku_attr_value']").parent().css({"border":"1px solid #CCC"});
			$("a[class='sku_attr_value checked']").parent().css({"border":"1px solid red"});

			$("a.sku_attr_value").click(function () {
				 var skus = new Array();
                 //获取选中checked的属性的skuIds
                 var skuArr = $(this).attr("skus").split(",");
				 skus.push(skuArr);
				 $(this).parent().parent().find(".sku_attr_value").removeClass("checked")
				$("a[class='sku_attr_value checked']").each(function () {
					skus.push($(this).attr("skus").split(","));
				})
				//找出多个属性的skuIds交集skuId
				if (skus.length == 0){
					alert("没有找到skuId");
					return;
				}

				var filterEle = skus[0];
				for (var i= 1; i < skus.length; i++){
					filterEle = filterEle.filter(skus[i]);
				}
				console.info("skuId==>",filterEle[0]);
				//跳转到skuId页面
				var domain = window.location.protocol+"//"+window.location.host;
				window.location.href=domain+"/"+filterEle[0]+".html";
			});

		});


	</script>

</html>
